<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <div class="block-box capital-card-box white-color items-start">
                <div class="small-font-size color-other">贷款余额</div>
                <div class="capital-money">120000.00</div>
                <div class="capital-des color-other" @click="CapitalListFun">贷款明细</div>
            </div>
            <mt-button class="button-recharge background white-color"
                       @click="goRechargeViewFun"
            >充值</mt-button>
        </div>
    </div>
</template>

<script>

    export default {
        name: "CapitalManage",
        data() {
            return {
                GetWindowBackground: {
                    'min-height': ''
                },
            }
        },
        methods: {
            //资金明细
            CapitalListFun(){
                this.$router.push('/CapitalList')
            },
            //充值
            goRechargeViewFun(){
                this.$router.push('/RechargeView')
            },
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>

    .capital-card-box {
        width: calc(100% - 80px);
        padding: 20px 25px;
        height: 100px;
        background-color: #4cde92; /* 浏览器不支持的时候显示 */
        background-image: linear-gradient(0deg, #05c569, #4cde92);
        border-radius: 6px;
        .capital-money {
            font-size: 24px;
        }
        .capital-des {
            border-radius: 20px;
            border: 1px solid #e8faf1;
            margin-left: auto;
            margin-top: auto;
            font-size: 13px;
            padding: 3px 15px;
        }
        .color-other {
            color: #e8faf1;
        }
    }

    .button-recharge {
        background: #05c569;
        border-radius: 10px;
        font-size: 15px;
        width: 60%;
        position: fixed;
        bottom: 30px;
        left: 20%;
    }

</style>